<template>
  <div class="illuminance-monitor">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>照度设备管理</h2>
      <div class="header-actions">
        <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新数据</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 左侧：报警日志模块 -->
        <el-col :span="12">
          <div class="alarm-log-module">
            <div class="module-header">
              <div class="header-left">
                <div class="title-decorator"></div>
                <span class="module-title">报警日志</span>
              </div>
            </div>
            
            <div class="alarm-log-content">
              <!-- 报警日志列表 -->
              <div v-if="alarmLogs.length > 0" class="log-list">
                <div v-for="log in alarmLogs" :key="log.id" class="log-item">
                  <div class="log-header">
                    <span class="log-device">{{ log.deviceName }}</span>
                    <span class="log-time">{{ log.createTime }}</span>
                  </div>
                  <div class="log-content">{{ log.deviceOpLog }}</div>
                  <div class="log-status">
                    <span :class="['status-badge', log.logType === '1' ? 'status-alarm' : 'status-normal']">
                      {{ log.logType === '1' ? '报警' : '正常' }}
                    </span>
                  </div>
                </div>
              </div>
              
              <!-- 暂无数据状态 -->
              <div v-else class="no-data-container">
                <div class="no-data-icon">
                  <svg viewBox="0 0 64 64" width="80" height="80">
                    <!-- 蓝色文件图标 -->
                    <rect x="16" y="8" width="32" height="44" rx="2" fill="#409eff" opacity="0.1" stroke="#409eff" stroke-width="2"/>
                    <rect x="20" y="12" width="24" height="2" fill="#409eff" opacity="0.6"/>
                    <rect x="20" y="16" width="20" height="2" fill="#409eff" opacity="0.6"/>
                    <rect x="20" y="20" width="16" height="2" fill="#409eff" opacity="0.6"/>
                    
                    <!-- 放大镜图标 -->
                    <circle cx="42" cy="32" r="8" fill="none" stroke="#409eff" stroke-width="2"/>
                    <path d="m48 38 4 4" stroke="#409eff" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </div>
                <div class="no-data-text">暂无数据</div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 右侧：照度传感器模块 -->
        <el-col :span="12">
          <div class="illuminance-sensor-module">
            <div class="module-header">
              <div class="header-left">
                <div class="title-decorator"></div>
                <span class="module-title">照度传感器</span>
              </div>
            </div>
            
            <div class="sensor-content">
              <!-- 设备信息卡片 -->
              <div class="device-info-card">
                <div class="card-header">
                  <div class="device-icon">
                    <svg viewBox="0 0 24 24" width="32" height="32">
                      <!-- 太阳样式的照度传感器图标 -->
                      <circle cx="12" cy="12" r="5" fill="#f39c12" stroke="#f39c12" stroke-width="2"/>
                      <line x1="12" y1="1" x2="12" y2="3" stroke="#f39c12" stroke-width="2" stroke-linecap="round"/>
                      <line x1="12" y1="21" x2="12" y2="23" stroke="#f39c12" stroke-width="2" stroke-linecap="round"/>
                      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="#f39c12" stroke-width="2" stroke-linecap="round"/>
                      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="#f39c12" stroke-width="2" stroke-linecap="round"/>
                      <line x1="1" y1="12" x2="3" y2="12" stroke="#f39c12" stroke-width="2" stroke-linecap="round"/>
                      <line x1="21" y1="12" x2="23" y2="12" stroke="#f39c12" stroke-width="2" stroke-linecap="round"/>
                      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="#f39c12" stroke-width="2" stroke-linecap="round"/>
                      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="#f39c12" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                  </div>
                  <div class="device-info">
                    <div class="device-title">{{ deviceInfo ? deviceInfo.deviceName : '照度传感器_1' }}</div>
                    <div class="device-value">光照值: {{ illuminanceValue }}</div>
                  </div>
                  <div class="settings-icon" @click="showSettings">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                      <!-- 设置图标 -->
                      <circle cx="12" cy="12" r="3" fill="none" stroke="#909399" stroke-width="2"/>
                      <path d="m12 1 1.09 3.26L16 4l-1 3.73L18.73 9l-3.73 1L16 14l-3.26-1.09L12 16l-1.09-3.26L8 14l1-3.73L5.27 9l3.73-1L8 4l3.26 1.09L12 1z" fill="none" stroke="#909399" stroke-width="2"/>
                    </svg>
                  </div>
                </div>
              </div>
              
              <!-- 空白区域保持页面简洁 -->
              <div class="empty-space"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 参数配置弹窗 -->
    <el-dialog title="参数配置" :visible.sync="settingsVisible" width="600px">
      <el-form :model="settingsForm" label-width="120px">
        <el-form-item label="设备名称">
          <el-input v-model="settingsForm.deviceName" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item label="光照阈值">
          <el-input-number v-model="settingsForm.threshold" :min="0" :max="100000" placeholder="请输入光照阈值"></el-input-number>
        </el-form-item>
        <el-form-item label="采集间隔">
          <el-select v-model="settingsForm.interval" placeholder="请选择采集间隔">
            <el-option label="1分钟" value="1"></el-option>
            <el-option label="5分钟" value="5"></el-option>
            <el-option label="10分钟" value="10"></el-option>
            <el-option label="30分钟" value="30"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="settingsVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSettings">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getIlluminanceDeviceList, getIlluminanceAlarmLogs, getIlluminanceDeviceManage } from '@/api/archives/illuminance'

export default {
  name: 'IlluminanceMonitor',
  data() {
    return {
      // 照度数据
      illuminanceValue: '0',
      deviceInfo: null,
      
      // 报警日志
      alarmLogs: [],
      logLoading: false,
      
      // 参数配置
      settingsVisible: false,
      settingsForm: {
        deviceName: '照度传感器_1',
        threshold: 1000,
        interval: '5'
      }
    }
  },
  
  mounted() {
    this.initData()
  },
  
  methods: {
    // 初始化数据
    async initData() {
      await this.getDeviceData()
      await this.getAlarmLogs()
    },
    
    // 刷新数据
    async refreshData() {
      this.$message.success('数据刷新成功')
      await this.initData()
    },
    
    // 获取设备数据
    async getDeviceData() {
      try {
        const response = await getIlluminanceDeviceManage()
        if (response.code === 200 && response.data && response.data.length > 0) {
          this.deviceInfo = response.data[0]
          this.illuminanceValue = this.deviceInfo.opStatus === '1' ? 
            Math.floor(Math.random() * 50000).toString() : '0'
          
          // 更新设置表单中的设备名称
          this.settingsForm.deviceName = this.deviceInfo.deviceName || '照度传感器_1'
        }
      } catch (error) {
        console.error('获取设备数据失败:', error)
        this.$message.error('获取设备数据失败')
        // 使用默认值
        this.illuminanceValue = '0'
      }
    },
    
    // 获取报警日志
    async getAlarmLogs() {
      this.logLoading = true
      try {
        const response = await getIlluminanceAlarmLogs()
        if (response.code === 200) {
          this.alarmLogs = response.data || []
        }
      } catch (error) {
        console.error('获取报警日志失败:', error)
        this.$message.error('获取报警日志失败')
        this.alarmLogs = []
      } finally {
        this.logLoading = false
      }
    },
    
    // 显示设置弹窗
    showSettings() {
      this.settingsVisible = true
    },
    
    // 保存设置
    saveSettings() {
      this.$message.success('参数配置保存成功')
      this.settingsVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.illuminance-monitor {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    h2 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: #303133;
    }
    
    .header-actions {
      display: flex;
      gap: 10px;
    }
  }
  
  .main-content {
    .el-row {
      height: 100%;
    }
    
    // 通用模块样式
    .alarm-log-module,
    .illuminance-sensor-module {
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      height: 600px;
      
      .module-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 20px 0 20px;
        
        .header-left {
          display: flex;
          align-items: center;
          gap: 10px;
          
          .title-decorator {
            width: 4px;
            height: 20px;
            background: #409eff;
            border-radius: 2px;
          }
          
          .module-title {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
          }
        }
      }
    }
    
    // 报警日志模块
    .alarm-log-module {
      .alarm-log-content {
        padding: 20px;
        height: calc(100% - 60px);
        
        .log-list {
          max-height: 100%;
          overflow-y: auto;
          
          .log-item {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            
            &:hover {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              transform: translateY(-1px);
            }
            
            .log-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 8px;
              
              .log-device {
                font-weight: 600;
                color: #303133;
                font-size: 14px;
              }
              
              .log-time {
                font-size: 12px;
                color: #909399;
              }
            }
            
            .log-content {
              color: #606266;
              font-size: 13px;
              line-height: 1.5;
              margin-bottom: 8px;
            }
            
            .log-status {
              display: flex;
              justify-content: flex-end;
              
              .status-badge {
                padding: 2px 8px;
                border-radius: 12px;
                font-size: 11px;
                font-weight: 500;
                
                &.status-alarm {
                  background: #fef0f0;
                  color: #f56c6c;
                  border: 1px solid #fbc4c4;
                }
                
                &.status-normal {
                  background: #f0f9ff;
                  color: #409eff;
                  border: 1px solid #b3d8ff;
                }
              }
            }
          }
        }
        
        .no-data-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          
          .no-data-icon {
            margin-bottom: 20px;
            opacity: 0.6;
          }
          
          .no-data-text {
            font-size: 16px;
            color: #c0c4cc;
            font-weight: 500;
          }
        }
      }
    }
    
    // 照度传感器模块
    .illuminance-sensor-module {
      .sensor-content {
        padding: 20px;
        height: calc(100% - 60px);
        
        .device-info-card {
          background: linear-gradient(135deg, #fff9e6, #fef5e7);
          border: 1px solid #f0f0f0;
          border-radius: 8px;
          padding: 20px;
          margin-bottom: 20px;
          
          .card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            
            .device-icon {
              flex-shrink: 0;
            }
            
            .device-info {
              flex: 1;
              
              .device-title {
                font-size: 18px;
                font-weight: 600;
                color: #303133;
                margin-bottom: 8px;
              }
              
              .device-value {
                font-size: 16px;
                color: #606266;
              }
            }
            
            .settings-icon {
              cursor: pointer;
              padding: 8px;
              border-radius: 4px;
              transition: background-color 0.3s;
              
              &:hover {
                background-color: rgba(64, 158, 255, 0.1);
              }
            }
          }
        }
        
        .empty-space {
          height: calc(100% - 120px);
          background: transparent;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .illuminance-monitor {
    padding: 10px;
    
    .main-content {
      .alarm-log-module,
      .illuminance-sensor-module {
        height: auto;
        min-height: 400px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>